<!-- 
	单图组件
	1、单图组件：上边距、下边距、左边距、右边距、图片圆角
	2、单图图片数组
-->
<template>
	<div class="component-wrapper" :style="wrapper_style">
		<template v-if="list && list.length > 0">
			<!-- <img v-for="(img, index) in list" :src="img.image || emptyImage" :key="index" :style="img_style"> -->
			<hotarea :debug="true" v-for="(img, index) in list" :src="img.image || emptyImage" :key="index"
				:style="img_style" :areas="img.hotArea" :usemap="`${componentId}${img.id}`"></hotarea>
		</template>
		<template v-else>
			<img :src="emptyImage" :style="img_style">
		</template>
	</div>
</template>

<script>
	import emptyImage from "@/static/images/banner.png";
	export default {
		name: 'u_simplegraph',
		props: {
			componentId: {
				type: String,
				default: ''
			},
			data: {
				type: Object,
				default () {
					return {
						//上边距
						"paddingTop": {
							type: Number,
							default: 0
						},
						//下边距
						"paddingBottom": {
							type: Number,
							default: 0
						},
						//左边距
						"paddingLeft": {
							type: Number,
							default: 0
						},
						//右边距
						"paddingRight": {
							type: Number,
							default: 0
						},
						//图片圆角
						"pictureBorder": {
							type: Number,
							default: 0
						},
						/**
						 * 单图图片数组
						 * "id": 图片ID
						 * "image": 图片地址
						 * "isMinApp":  1 内部链接 2小程序链接
						 * "h5Link":  H5页面跳转地址 内部链接时赋值
						 * "gh_id": 小程序原始ID 2小程序链接时赋值
						 * "minAppLink": 小程序页面跳转地址
						 * "text":  链接名称
						 */
						"list": [],
						// 选择样式 未实现
						"chooseStyle": {
							type: String,
							default: '2'
						}
					}
				}
			}
		},
		computed: {
			/** 样式 */
			wrapper_style() {
				if (this.data.list) {
					const {
						paddingTop,
						paddingBottom,
						paddingLeft,
						paddingRight,
					} = this.data;
					return `
		                padding-top: ${paddingTop}px;
		                padding-bottom: ${paddingBottom}px;
		                padding-left: ${paddingLeft}px;
		                padding-right: ${paddingRight}px;
						
		            `;
				}
			},

			img_style() {
				const {
					pictureBorder,
				} = this.data;
				return `
						width: 100%;
		                border-radius: ${pictureBorder}px;
		            `;
			},

			/** 标题 */
			list() {
				return this.data.list;
			},
		},
		data() {
			return {

			}
		},
		methods: {
			// 页面跳转
			navigateTo(item) {
				if (item.isMinApp == 1) {
					//H5链接跳转
					uni.navigateTo({
						url: '/pages/webView/webView?url=' + encodeURIComponent(item.h5Link),
						animationType: 'fade-in'
					});
				} else if (item.isMinApp == 2) {
					// 小程序链接跳转
					uni.navigateTo({
						url: item.minAppLink,
						animationType: 'fade-in'
					});
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.component-wrapper {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.component-wrapper img {
		margin-bottom: 5px;
	}

	.component-wrapper img:last-child {
		margin-bottom: 0;
	}
</style>
